<script>
import axios from "axios";
import {ref} from "vue";
import global from "@/views/global/global";
export default {
  name: "WebsiteGuide",
  //组件部件
  setup(){
    const dialogVisible1 = ref(false);
    const dialogVisible2 = ref(false);
    return {
      dialogVisible1,
      dialogVisible2,
    }
  },
  data(){
    return {
      queryFavorites:[],
      pageDto:{
        pageSize:3,
        pageNum:1
      },
      Favorites:{
        userId:global.user.id,
        name : "",
        url : ""
      },
      total:0,
      pages:0,
      updateFavoriteList:[]
    }
  },
  methods: {
    getData: function () {//分页查询
      axios.get("/oa/favorites/queryFavorites", {params: this.pageDto}).then((res) => {
        console.log(res.data.data)
        this.pageDto.pageNum = res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total = res.data.data.total;
        this.pages = res.data.data.pages;
        this.queryFavorites = res.data.data.list;
      })
    },
    insertDesktopURL:function(){//新增
      axios.post('/oa/favorites/insertFavorites', this.Favorites).then(res=>{
        this.$message({
          type: 'success',
          message: '新增成功!'
        });
        this.Favorites= {  userId:global.user.id,
          name : "",
          url : ""}
        this.getData()
        this.dialogVisible1 = false;
      })
    },
    queryFavoritesById(index, favoriteId){//修改_获取数据
      this.dialogVisible2 = true;
      axios.get(`/oa/favorites/queryFavoritesById/${favoriteId}`)
          .then((res) => {
            console.log(res)
            this.updateFavoriteList = res.data.data
          })
          .catch((error) => {
            console.log(error)
          })
    },
    updateFavorites () {//修改
      this.updateFavoriteList.userId = global.user.id
      axios.put("/oa/favorites/updateFavorites",this.updateFavoriteList)
          .then( (data)=>{
            console.log(this.updateFavoriteList)
            if(data.data){
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.dialogVisible2 = false
              this.getData()
            }else {
              this.$message({
                type: 'error',
                message: '修改失败!'
              });
              this.dialogVisible2 = false
            }
          })
          .catch((error)=>{
            console.log(error)
          });
    },
    deleteFavorites(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`/oa/favorites/deleteFavorites/${row.favoriteId}`)
            .then((data) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getData()
            })
            .catch((error) => {
              console.log(error)
            })
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      );
    }
  },

  created() {
    this.getData();
  }
}
</script>

<template>
  <!--标头显示-->
  <div  class="titleBox">
    <router-link :to="'/HomePageView'">
      <el-button class="titleLeft" plain style="
      border: none;
      font-weight: bold;
      text-align: left;
      float: left;
      margin: 5px 0 0 0 ">
        <&nbsp;&nbsp;&nbsp;&nbsp;桌面
      </el-button>
    </router-link>
    常用网址
  </div>

  <div>
    <div>
      <el-button size="small" @click="dialogVisible1 = true">新增</el-button>
      <!-- 首页表格信息显示 -->
      <el-table :data="this.queryFavorites" style="width: 100%">

        <el-table-column label="网址名称">
          <template #default="scope">
            <div style="display: flex; align-items: center">

              <span style="margin-left: 10px">{{ scope.row.name}}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="网址">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-link :href=" scope.row.url " target="_blank">
                <span style="margin-left: 10px">{{ scope.row.url }}</span>
              </el-link>

            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="queryFavoritesById(scope.$index, scope.row.favoriteId)">
              修改
            </el-button>
            <el-button size="small" @click="deleteFavorites(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页-->
      <el-pagination
          v-model:current-page="this.pageDto.pageNum"
          :page-size="this.pageDto.pageSize"
          :pager-count="this.pages"
          layout="prev, pager, next"
          :total="this.total"
          @current-change="getData"
      />
    </div>
  </div>

  <el-dialog
      v-model="dialogVisible2"
      title="修改角色"
      width="500"
      :before-close="handleClose"
  >
    <el-form
        style="max-width: 500px;margin: 0 auto"
        :model="car"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="userCord">
        <el-input
            v-model="this.updateFavoriteList.name"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>
      <el-form-item label="超链接" prop="userCord">
        <el-input
            v-model="this.updateFavoriteList.url"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="updateFavorites()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      v-model="dialogVisible1"
      title="添加网址"
      width="450"
  >
    <el-form
        style="max-width: 500px;margin: 0 auto"
        :model="car"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="userCord">
        <el-input
            v-model="this.Favorites.name"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>
      <el-form-item label="超链接" prop="userCord">
        <el-input
            v-model="this.Favorites.url"
            type="text"
            autocomplete="off"
            aria-required="true"
        />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="insertDesktopURL()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>


<style scoped lang="less">

</style>
